

<!-- 新增地址 -->
<template>
	<view class="content">
		<view class="user-msg">
			<view class="msg-one">
				<!-- 收货人 -->
				<view class="left">收货人</view>
				<view class="right"><input placeholder-class="txt-color" placeholder="收货人姓名" v-model="form.name" /></view>
			</view>
			
			<!-- 性别 -->
			<view class="msg-one">
				<view class="left"></view>
				<view class="right">
					<radio-group style="display: flex;" :value="form.sex">
						<view class="radio">
							<radio color="#FE5E49" value="1" :checked="form.is_man" @click="form.sex = '1'" />
							先生
						</view>
						<view class="radio" style="margin-left: 20rpx;">
							<radio color="#FE5E49" value="2" :checked="!form.is_man" @click="form.sex = '2'" />
							女士
						</view>
					</radio-group>
				</view>
			</view>
			
			<!-- 手机号 -->
			<view class="msg-one">
				<view class="left">手机号</view>
				<view class="right"><input placeholder-class="txt-color" placeholder="收货人手机号" maxlength="11" type="number" v-model="form.phone" /></view>
			</view>
			
			<!-- 地址 --> 
			<view class="msg-one">
				<view class="left">所在地区</view> 
				<view class="right" style="display: flex;">
					<view style="width: 90%;" class="txt-color">
						<!-- :range-key="'Name'" -->
						<picker mode="multiSelector" @click="getProvince('86')" @change="sel()" @columnchange="bindMultiPickerColumnChange" :value="multiIndex"
						 :range="multiArray">
							<view style="width: 100%;font-size: 28rpx;color: #333;" >
								<text v-if="form2.addressMsg=='请选择所在地区'" class="txt-color">{{ form2.addressMsg }}</text>
								<text v-else>{{ form2.addressMsg || addressMsg }}</text>
								<text class="txt-color" style="display: none;">{{ addressMsg }}</text>
								<!-- {{address[0][0].text}}，{{address[1][0].text}}，{{address[2][0].text}} -->
							</view>
						</picker>
					</view>
					<view style="width: 10%;text-align: right;">
						<image :src="icon.totap" style="width: 11rpx;height: 20rpx;"></image>
					</view>
				</view>
			</view>
			
			<!-- 详细地址 -->
			<view class="msg-one" style="height: 181rpx;align-items: stretch;padding-top: 35rpx;border: none;">
				<view class="left">详细地址</view>
				<view class="right2"><input focus="false" placeholder-style="color: #BFBFBF;font-size:28rpx;" placeholder="详细地址，如街道、小区、门牌号、楼栋号、单元室等" v-model="form.address" style="z-index: 100;width: 430rpx ;" /></view>
			</view>
		</view>
		
		<!-- 是否设为默认地址 -->
		<view class="setting">
			<view class="left">设为默认地址</view>
			<view class="right"><switch color="#FE5E49" :checked="form.is_default" @change="form.default == 0 ? (form.default = 1) : (form.default = 0)"></switch></view>
		</view>
		
		<!-- 删除地址 -->
		<view class="setting" v-if="type != 'add'" @click="toDelect"><view class="left" style="color: #FE5E49;">删除收货地址</view></view>
		<button class="add-btn" @tap="save">保存</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			icon: {
				totap: '/static/images/address/totap.png'
			},
			address: [[], [], []],
			multiArray: [[], [], []],
			multiIndex: [0, 0, 0],
			firstLoad: true,
			provinceCode: '',
			cityCode: '',
			districtCode: '',
			addressMsg: '请选择所在地区',
			form: {
				id:'',
				name: '',
				sex: '1',
				phone: '',
				address: '',
				default: 0,
				is_man: true,
				is_default: false
			},
			form2:{
				province:'',
				provinceCode:'',
				city:'',
				cityCode:'',
				district:'',
				districtCode:'',
				addressMsg:'请选择所在地区'
			},
			type: '',
			firstAddress:false,
			changeType:false
		};
	},
	onLoad(option) {
		
		let that = this;
		this.type = option.type;
		
		if (option.data) {
			let data = JSON.parse(option.data);
			this.form.id = data.id;
			this.form.name = data.consignee;
			this.form.sex = data.sex;
			data.sex == '1' ? '' : (this.form.is_man = false);
			this.form.phone = data.telephone;
			this.form.address = data.address;
			this.form.default = data.defaultFlag;
			data.defaultFlag == '1' ? (this.form.is_default = true) : '';
			this.provinceCode = data.provinceCode;
			this.cityCode = data.cityCode;
			this.districtCode = data.districtCode;
			console.log(data);
			let form2 = {	
				province: data.province,
				provinceCode: data.provinceCode,
				city: data.city,
				cityCode: data.cityCode,
				district: data.district,
				districtCode: data.districtCode,
				addressMsg:data.province +data.city +data.district
			};
			that.form2 = form2;
			uni.setNavigationBarTitle({
				title: '修改收货地址'
			});
		    this.getProvince('86');
			
		}
 
	},
	methods: {
		// 获得所有省份
		getProvince(id) {
			if(this.firstAddress) return;
			this.firstAddress = true;
			let that = this;
			this.$api.globalUtil.requestAjax({
				url: '/AreaApi/listForApi',
				method: 'POST',
				data: {
					grade: 1,
					parentId: id
				},
				success: function(res) {
					for (let i of res.data.response) {
						that.address[0].push(i);
						that.multiArray[0].push(i.text);
					}
					if (that.type == 'change') {
						for (let j in that.address[0]) {
							if (that.provinceCode == that.address[0][j].value) {
								that.multiIndex[0] = j;
								that.getCity(that.address[0][j].value);
								console.log(j);
								break;
							}
						}
					} else {
						that.getCity(that.address[0][0].value);
					}
					// console.log(that.address[0])
				}
			});
		},
		// 获得城市列表
		getCity(id) {
			// console.log(id);
			let that = this;
			this.$api.globalUtil.requestAjax({
				url: '/AreaApi/listForApi',
				method: 'POST',
				data: {
					grade: 2,
					parentId: id
				},
				success: function(res) {
					let address = [];
					let multiArray = [];
					for (let i of res.data.response) {
						address.push(i);
						multiArray.push(i.text);
					}
					// that.address[1] = address;
					// that.multiArray[1] = multiArray;
					
					  that.giveData(1, address, multiArray);
					  that.getArea(that.address[1][0].value);
					if (that.type == 'change') {
						for (let j in that.address[1]) {
							if (that.cityCode == that.address[1][j].value) {
								that.multiIndex[1] = j;
								that.getArea(that.address[1][j].value);
								console.log(j);
								break;
							}
						}
					} else {
					  that.getArea(that.address[1][0].value);
					}
					
				}
			});
		},
		// 获得区列表
		getArea(id) {
			let that2 = this;
			this.$api.globalUtil.requestAjax({
				url: '/AreaApi/listForApi',
				method: 'POST',
				data: {
					grade: 3,
					parentId: id
				},
				success: function(res) {
					let address = [];
					let multiArray = [];
					for (let i of res.data.response) {
						address.push(i);
						multiArray.push(i.text);
					}
					// this.addressMsg = '';
					// console.log('areaid==>',address,multiArray);
					that2.giveData(2, address, multiArray);
					
					if (that2.type == 'change') {
						for (let j in that2.address[2]) {
							if (that2.districtCode == that2.address[2][j].value) {
								that2.multiIndex[2] = j;
								break;
							}
						}
					}
					
				}
			});
		},
		// 三级联动
		bindMultiPickerColumnChange(e) {
			this.multiIndex[e.detail.column] = e.detail.value;
			if (e.detail.column - 0 === 0) {
				this.getCity(this.address[0][e.detail.value].value);
				this.multiIndex[1] = 0;
			} else if (e.detail.column - 0 === 1) {
				this.multiIndex[2] = 0;
				this.getArea(this.address[1][e.detail.value].value);
			} else {
				let a = this.address[0][this.multiIndex[0]].text;
				let b = this.address[1][this.multiIndex[1]].text;
				let c = this.address[2][this.multiIndex[2]].text;
				this.addressMsg = a + b + c;
				if(this.changeType){
						this.sel();
				}
			}
		},
		// 保存
		save() {
			
			var that = this;
			
			let url = this.type == 'add' ? '/CustomerApi/addCustomerAddressForApi' : '/CustomerApi/updateCustomerAddressForApi';
			if(this.form.name == ''){
				this.$api.msg('请输入收货人姓名');
				return;
			}
			if(this.form.phone == ''){
				this.$api.msg('请输入收货人手机号');
				return;
			}else if(this.form.phone.length!=11){
				this.$api.msg('请检查收货人手机号格式');
				return;
			}
			if(this.form2.province == ''){
				this.$api.msg('请选择所在地区');
				return;
			}
			if(this.form.address == ''){
				this.$api.msg('请输入详细地址');
				return;
			}
			
			this.$api.globalUtil.requestAjax({
				url: url,
				method: 'POST',
				data: {
					id:this.form.id,
					consignee: this.form.name,
					province: this.form2.province,
					provinceCode: this.form2.provinceCode,
					city: this.form2.city,
					cityCode: this.form2.cityCode,
					district: this.form2.district,
					districtCode: this.form2.districtCode,
					address: this.form.address,
					telephone: this.form.phone,
					sex: this.form.sex,
					defaultFlag: this.form.default
				},
				success: function(res) {
					
					that.$api.msg('保存收货地址成功!');
					
					//更新收货地址缓存
					if(that.type != 'add') {
						var addressData = uni.getStorageSync('addressData') ;
						if(addressData) {
							addressData = JSON.parse(uni.getStorageSync('addressData') || "{}");
							if(addressData["id"] == that.form.id) {
								addressData["consignee"] = that.form.name;
								addressData["telephone"] = that.form.phone;
								addressData["province"] = that.form2.province;
								addressData["city"] = that.form2.city;
								addressData["district"] = that.form2.district;
								addressData["address"] = that.form.address;
								
								uni.setStorageSync("addressData", JSON.stringify(addressData));
							}
						}
					}	
					
					setTimeout(function() {
						uni.navigateBack({
							detail: '1'
						});
					}, 2000);
				}
			});
		},
		
		
		//删除收货地址
		toDelect() {
			var that = this;
			uni.showModal({
				content: '确认删除收货地址？',
				confirmText: '确认',
				cancelText: '取消',
				success(res) {
					if (res.confirm) {
			
						that.$api.globalUtil.requestAjax({
							url: '/CustomerApi/deleteCustomerAddressForApi',
							method: 'POST',
							data: {
								id: that.form.id
							},
							success: function(res) {
								
								that.$api.msg('删除收货地址成功!');
								
								//更新收货地址缓存
								var addressData = uni.getStorageSync('addressData') ;
								if(addressData) {
									addressData = JSON.parse(uni.getStorageSync('addressData') || "{}");
									if(addressData["id"] == that.form.id) {
										uni.removeStorageSync("addressData");
									}
								}
								
								setTimeout(function() {
									uni.navigateBack({
										detail: '1'
									});
								}, 2000);
							}
						});
					}
				}
			});
		},
		// 赋值
		giveData(index, address, multiArray) {
			this.address[index] = address;
			this.multiArray[index] = multiArray;
			if (index === 2) {
				let a = this.address[0][this.multiIndex[0]].text;
				let b = this.address[1][this.multiIndex[1]].text;
				let c = this.address[2][this.multiIndex[2]].text;
				
					
					this.addressMsg = a + b + c;
					if(this.changeType){
							this.sel();
					}
				
			}
			// index === 2?this.addressMsg = this.address[0][0].text + address[1][0].text + address[2][0].text:'';
		},
		sel(){
			
			let that = this;
				let form2 = {	
					province: that.address[0][that.multiIndex[0]].text,
					provinceCode: that.address[0][that.multiIndex[0]].value,
					city: that.address[1][that.multiIndex[1]].text,
					cityCode: that.address[1][that.multiIndex[1]].value,
					district: that.address[2][that.multiIndex[2]].text,
					districtCode: that.address[2][that.multiIndex[2]].value,
					addressMsg:that.addressMsg
				};
				that.form2 = form2;
			    this.changeType = true;
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f5f5f5;
	padding-top: 20rpx;
}
.user-msg {
	width: 690rpx;
	background-color: white;
	height: 587rpx;
	margin-left: 30rpx;
	border-radius: 10rpx;
	.msg-one {
		height: 100rpx;
		width: 626rpx;
		margin-left: 32rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		color: #333;
		.left {
			width: 158rpx;
			color: #666666;
		}
		.right {
			width: 468rpx;
			color: #333333;
			font-size: 28rpx;
			.radio {
				display: flex;
				align-items: center;
			}
			radio {
				zoom: 0.8;
				margin-right: 20rpx;
			}
		}
		.right2 {
			width: 468rpx;
			color: #333333;
			font-size: 28rpx;
			textarea {
				width: 430rpx;
				height: 100%;
			}
		}
	}
}
.txt-color {
	color: #bfbfbf;
	font-size: 28rpx;
}
.setting {
	display: flex;
	width: 690rpx;
	height: 100rpx;
	background: white;
	border-radius: 10rpx;
	align-items: center;
	margin-left: 30rpx;
	margin-top: 20rpx;
	.left {
		width: 50%;
		padding-left: 30rpx;
		color: #333333;
		font-size: 28rpx;
	}
	.right {
		width: 50%;
		padding-right: 30rpx;
		text-align: right;
		switch {
			zoom: 0.8;
		}
	}
}

.add-btn {
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 600rpx;
	height: 90rpx;
	font-size: 34rpx;
	color: #fff;
	margin: 0 auto;
	background: #FE5E49;
	border-radius: 45rpx;
	margin-top: 140rpx;
}
.picker {
}
</style>
